﻿@page "/ChartStackedBarSeries"
@namespace BlazorDemo

<DemoPageSectionComponent Id="Charts-BarSeries-StackedBar">
    @inject IPopulationStructureDataProvider DataProvider

    <DxChart T="PopulationAgeStructureItem"
             Data="@ChartsData"
             Width="100%">
        <DxChartTitle Text="Population: Age Structure">
            <DxChartSubTitle Text="Data Estimate for 2020" />
        </DxChartTitle>
        <DxChartStackedBarSeries T="PopulationAgeStructureItem"
                                 TArgument="string"
                                 TValue="int"
                                 ArgumentField="pasi => pasi.Country"
                                 Name="0-14 years"
                                 ValueField="pasi => pasi.Population"
                                 SummaryMethod="Enumerable.Sum"
                                 Filter='pasi => pasi.AgeGroup == "0-14 years"' />
        <DxChartStackedBarSeries T="PopulationAgeStructureItem"
                                 TArgument="string"
                                 TValue="int"
                                 Name="15-64 years"
                                 ArgumentField="pasi => pasi.Country"
                                 ValueField="pasi => pasi.Population"
                                 SummaryMethod="Enumerable.Sum"
                                 Filter='pasi => pasi.AgeGroup == "15-64 years"' />
        <DxChartStackedBarSeries T="PopulationAgeStructureItem"
                                 TArgument="string"
                                 TValue="int"
                                 Name="65 years and older"
                                 ArgumentField="pasi => pasi.Country"
                                 ValueField="pasi => pasi.Population"
                                 SummaryMethod="Enumerable.Sum"
                                 Filter='pasi => pasi.AgeGroup == "65 years and older"' />
        <DxChartLegend Position="RelativePosition.Outside"
                       HorizontalAlignment="HorizontalAlignment.Center"
                       VerticalAlignment="VerticalEdge.Bottom" />
        <DxChartTooltip Enabled="true"
                        Position="RelativePosition.Outside">
            <div style="margin: 0.75rem">
                <div class="fw-bold">@context.Point.Argument</div>
                <div>Age Group: @context.Point.SeriesName</div>
                <div>Population: @($"{context.Point.Value:N0}")</div>
            </div>
        </DxChartTooltip>
    </DxChart>

    @code {
        IEnumerable<PopulationAgeStructureItem> ChartsData;

        protected override async Task OnInitializedAsync() {
            ChartsData = await DataProvider.QueryData();
        }
    }
</DemoPageSectionComponent>
